<template>
  <!-- 查看他人的分享时，保存文件到个人网盘 -->
  <el-dialog
    title="保存文件到网盘"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
    @close="handleDialogClose"
  >
    <div class="el-dialog-div">
      <!-- 选择的目标路径 -->
      <div class="target-path">
        <span class="label">目标路径：</span>
        <el-input
          v-model="targetPath"
          class="content"
          readonly
          size="small"
        />
      </div>
      <!-- 文件目录树 -->
      <el-tree
        v-loading="loading"
        :data="fileTree"
        :props="{
          children: 'children',
          label: 'label'
        }"
        :highlight-current="true"
        :expand-on-click-node="false"
        :default-expanded-keys="defaultExpandedKeys"
        node-key="id"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span class="label">{{ node.label }}</span>
          <el-button
            class="add-folder-btn"
            type="text"
            size="mini"
            @click.stop="handleAddFolderBtnClick(data)"
          >
            新建文件夹
          </el-button>
        </span>
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleDialogClose">取 消</el-button>
      <el-button
        type="primary"
        :loading="sureBtnLoading"
        @click="handleDialogSure"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getFoldTree, saveShareFile } from '@/api/file/netFile'

export default {
  name: 'SaveShareFileDialog',
  data() {
    return {
      visible: false, //  对话框是否可见
      targetPath: '/', //  目标路径
      fileTree: [], //  文件夹目录树
      loading: false, //  文件夹目录树 loading 状态
      defaultExpandedKeys: [],
      sureBtnLoading: false //  确定按钮 loading 状态
    }
  },
  methods: {
    /**
		 * 取消按钮点击事件 & 对话框关闭的回调
		 */
    handleDialogClose() {
      this.visible = false
      this.callback('cancel')
    },
    /**
		 * 对话框打开的回调
		 */
    handleDialogOpen() {
      this.initFileTree()
    },
    /**
		 * 初始化文件目录树
		 */
    initFileTree(id) {
      this.loading = true
      getFoldTree().then((res) => {
        this.loading = false
        if (res.success) {
          this.fileTree = [res.data]
          this.defaultExpandedKeys = id ? [id] : [this.fileTree[0].id]
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
		 * 目录树节点点击回调函数
		 * @description 将当前节点中的文件夹路径传递给父组件
		 * @param {object} data 当前点击的节点信息
		 */
    handleNodeClick(data) {
      this.targetPath = data.filePath ? data.filePath : '/'
    },
    /**
		 * 新建文件夹按钮点击事件
		 * @description 调用新建文件夹服务，并在弹窗确认回调事件中刷新文件夹树
		 */
    handleAddFolderBtnClick(data) {
      this.$openFileDialog
        .addFolder({
          filePath: data.filePath || '/'
        })
        .then(() => {
          this.initFileTree(data.id)
        })
    },
    /**
		 * 确定按钮点击事件
		 * @description 调用移动文件接口
		 */
    handleDialogSure() {
      this.sureBtnLoading = true
      saveShareFile({
        filePath: this.targetPath,
        userFileIds: this.userFileIds,
        shareBatchNum: this.shareBatchNum
      })
        .then((res) => {
          this.sureBtnLoading = false
          if (res.success) {
            this.visible = false
            this.$message.success('保存成功')
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.sureBtnLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
>>> .el-dialog {
  .el-dialog__header {
    display: flex;
  }

  .el-dialog__body {
    padding: 10px 30px;

    .el-dialog-div {
      height: 300px;
      overflow: auto;
      // 修改滚动条下面的宽度
      &::-webkit-scrollbar {
        width: 6px;
      }
      // 修改滚动条的下面的样式
      &::-webkit-scrollbar-track {
        background-color: #EBEEF5;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
      }
      // 修改滑块
      &::-webkit-scrollbar-thumb {
        background-color: #909399;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
      }
      .target-path {
        display: flex;
        align-items: center;

        .label {
          width: 80px;
        }

        .content {
          flex: 1;
        }
      }

      .el-tree {
        .el-tree-node__content {
          height: 34px;
          font-size: 16px;

          .el-icon-caret-right {
            font-size: 18px;
          }

          .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
          }

          .add-folder-btn {
            display: none;
          }

          &:hover {
            .add-folder-btn {
              display: block;
            }
          }
        }

        .el-tree-node.is-current>.el-tree-node__content {
          color:  #409EFF;
        }
      }
    }
  }
}
</style>
